<template>
  <div style="margin: 10px;">
    <el-card class="box-card" style="height: 90px;padding: 10px;margin-bottom: 10px;">
        <el-row :gutter="20">
            <el-col :span="4">
                <div class="title-box" style="background-color: #11C2EE;">
                    <el-row :gutter="5">
                        <el-col :span="14"><div class="sb-icon"><el-image :src="require('@/assets/img/diannao.png')"></el-image></div></el-col>
                        <el-col :span="10"><div class="shuliang">9</div><div class="shebei">设备总数</div></el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="4" :offset="1">
                <div class="title-box" style="background-color: #22DDB8;">
                    <el-row :gutter="5">
                        <el-col :span="14"><div class="sb-icon"><el-image :src="require('@/assets/img/shebei.png')"></el-image></div></el-col>
                        <el-col :span="10"><div class="shuliang">9</div><div class="shebei">正常设备数</div></el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="4" :offset="1">
                <div class="title-box" style="background-color: #ff3333;">
                    <el-row :gutter="5">
                        <el-col :span="14"><div class="sb-icon"><el-image :src="require('@/assets/img/shebei.png')"></el-image></div></el-col>
                        <el-col :span="10"><div class="shuliang">0</div><div class="shebei">异常设备数</div></el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="4" :offset="1">
                <div class="title-box" style="background-color: #ff33cc;">
                    <el-row :gutter="5">
                        <el-col :span="14"><div class="sb-icon"><el-image :src="require('@/assets/img/gaojing.png')"></el-image></div></el-col>
                        <el-col :span="10"><div class="shuliang">192789</div><div class="shebei">设备告警总数</div></el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="4" :offset="1">
                <div class="title-box" style="background-color: #cc99cc;">
                    <el-row :gutter="5">
                        <el-col :span="13"><div class="sb-icon"><el-image :src="require('@/assets/img/gaojing2.png')"></el-image></div></el-col>
                        <el-col :span="11"><div class="shuliang">0</div><div class="shebei">本月设备告警数</div></el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </el-card>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card style="margin-top: 10px;height: 300px;">
                    <div class="title">
                        环境告警占比
                    </div>
                    <div class="echartsCss" ref="echartsbox1">
                        <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card style="margin-top: 10px;height: 300px;">
                    <div class="title">
                        行为告警占比
                    </div>
                    <div class="echartsCss" ref="echartsbox2">
                        <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card style="margin-top: 10px;height: 300px;">
                    <div class="title">
                        相机告警占比
                    </div>
                    <div class="echartsCss" ref="echartsbox3">
                        <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card style="margin-top: 10px;height: 300px;">
                    <el-row>
                        <el-col :span="12">
                            <div class="title1">总告警TOP5</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="title1" style="float: right;">
                                <div style="margin-bottom: -6px;">
                                    <el-radio-group v-model="radio1" size="mini">
                                        <el-radio-button label="日"></el-radio-button>
                                        <el-radio-button label="月"></el-radio-button>
                                        <el-radio-button label="年"></el-radio-button>
                                    </el-radio-group>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <div style="border-bottom: 1px solid black;"></div>
                    <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card style="margin-top: 10px;height: 300px;">
                    <el-row>
                        <el-col :span="12">
                            <div class="title1">环境告警TOP5</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="title1" style="float: right;">
                                <div style="margin-bottom: -6px;">
                                    <el-radio-group v-model="radio2" size="mini">
                                        <el-radio-button label="日"></el-radio-button>
                                        <el-radio-button label="月"></el-radio-button>
                                        <el-radio-button label="年"></el-radio-button>
                                    </el-radio-group>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <div style="border-bottom: 1px solid black;"></div>
                    <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card style="margin-top: 10px;height: 300px;">
                    <div class="title">
                        近六个月告警
                    </div>
                    <div class="echartsCss" ref="echartsbox4">
                        <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
        radio1:'日',
        radio2:'日',
    }
  },
  created () {
  },
  mounted () {
    this.huanjingEcharts()
    this.xingweiEcharts()
    this.xaingjiEcharts()
    this.jin6Echarts()
  },
  methods: {
    huanjingEcharts(){
        var echartsbox1=this.$refs.echartsbox1;
        let myChart = this.$echarts.getInstanceByDom(
        this.$refs.echartsbox1
        );
        if (myChart == null) {
        myChart = this.$echarts.init(echartsbox1);
        }
        
        var option; 
        option = {
            color:['#3333ff','#ff0033','#ff33ff','#ffcc00'],
            tooltip: {
                trigger: 'item'
            },
            legend: {
                // orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                type: 'pie',
                radius: ['40%', '70%'],
                center:['50%','55%'],
                data: [
                    { value: 7869, name: '老鼠活动' },
                    { value: 6793, name: '烟火识别' },
                    { value: 19369, name: '地面积水' },
                    { value: 5754, name: '明火离岗' }
                ],
                label:{
                    formatter:function(data){
                    //显示数量、百分比
                    return `${data.name}\n ${data.value}(${data.percent.toFixed(2)}%)`
                        //加上\n就是换行显示                
                        //return `${data.name} ${data.value}\n(${data.percent.toFixed(1)}%)`
                    }
                },
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
        };
        option && myChart.setOption(option);
    },
    xingweiEcharts(){
        var echartsbox2=this.$refs.echartsbox2;
        let myChart = this.$echarts.getInstanceByDom(
        this.$refs.echartsbox2
        );
        if (myChart == null) {
        myChart = this.$echarts.init(echartsbox2);
        }
        
        var option; 
        option = {
            color:['#ff3333','#33cc00','#9933cc','#3366ff'],
            tooltip: {
                trigger: 'item'
            },
            legend: {
                // orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                type: 'pie',
                radius: ['40%', '70%'],
                center:['50%','55%'],
                data: [
                    { value: 112361, name: '口罩识别' },
                    { value: 32, name: '抽烟识别' },
                    { value: 39890, name: '帽子识别' },
                    { value: 703, name: '夜间人员闯入' }
                ],
                label:{
                    formatter:function(data){
                    //显示数量、百分比
                    return `${data.name}\n ${data.value}(${data.percent.toFixed(2)}%)`
                        //加上\n就是换行显示                
                        //return `${data.name} ${data.value}\n(${data.percent.toFixed(1)}%)`
                    }
                },
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
        };
        option && myChart.setOption(option);
    },
    xaingjiEcharts(){
        var echartsbox3=this.$refs.echartsbox3;
        let myChart = this.$echarts.getInstanceByDom(
        this.$refs.echartsbox3
        );
        if (myChart == null) {
        myChart = this.$echarts.init(echartsbox3);
        }
        
        var option; 
        option = {
            color:['#66ffff','#6600ff','#000000'],
            tooltip: {
                trigger: 'item'
            },
            legend: {
                // orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                type: 'pie',
                radius: ['40%', '70%'],
                center:['50%','55%'],
                data: [
                    { value: 0, name: '相机模糊' },
                    { value: 0, name: '相机遮挡' },
                    { value: 0, name: '相机离线' },
                ],
                label:{
                    formatter:function(data){
                    //显示数量、百分比
                    return `${data.name}\n ${data.value}(${data.percent.toFixed(2)}%)`
                        //加上\n就是换行显示                
                        //return `${data.name} ${data.value}\n(${data.percent.toFixed(1)}%)`
                    }
                },
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
        };
        option && myChart.setOption(option);
    },
    jin6Echarts(){
        var echartsbox4=this.$refs.echartsbox4;
        let myChart = this.$echarts.getInstanceByDom(
        this.$refs.echartsbox4
        );
        if (myChart == null) {
        myChart = this.$echarts.init(echartsbox4);
        }
        
        var option; 
        option = {
            color:['#ff6666','#33cc00','#9966cc',],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                top: 8,
                itemWidth: 10,
                itemHeight: 10,
                data: ['环境告警', '行为告警', '相机告警'],
                },
            xAxis: [
                {
                type: 'category',
                data: ['2022-08', '2022-09', '2022-10', '2022-11', '2022-12', '2023-01'],
                axisTick: {
                    alignWithLabel: true
                }
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            series: [
            {
                    name: '环境告警',
                    type: 'bar', // 这个是柱状图的类型，设置成这个就是柱状图
                    barWidth: 20, // 柱子的宽度，设置一个就行了，别的也会采用这个宽度
                    stack: 'Ad', // 设置这个就会成为堆叠柱状图
                    emphasis: {  //设置这个就会点击单个
                    focus: 'series',
                    },
                    data: [3605, 3000, 100, 90, 0, 0, 0],
                },
                {
                    name: '行为告警',
                    type: 'bar',
                    stack: 'Ad',
                    emphasis: {
                    focus: 'series',
                    },
                    data: [10254, 9000, 8000, 7000, 0, 0, 0],
                },
                {
                    name: '相机告警',
                    type: 'bar',
                    stack: 'Ad',
                    emphasis: {
                    focus: 'series',
                    },
                    data: [0,0,0,0,0,0,0,0,0,],
                },
            ]
        };
        option && myChart.setOption(option);
    }
  },
}
</script>
<style lang="scss" scoped>
.echartsCss{
    width: 100%;
    height: 250px;
}
.title{
    padding: 10px;
    border-bottom: 1px solid black
}
.title1{
    padding: 10px;
}
.sb-icon{
	width: 60px;
	height: 60px;
	margin-left: 10px;
}
.title-box{
	background:#F2F2F7;
	padding:10px 10px 10px 5px;
	border-radius:8px;
	margin:0px auto;
	/* position: relative;
	left: 100px; */
	height: 60px;
	/* margin-bottom: 10px; */
}
.shuliang{
	color: white;
	font-size: 22px;
	text-align: center;
}
.shebei{
	color: white;
	font-size: 12px;
	text-align: center;
}
</style>
